<template>
    <!-- 常规登入 -->
    <div class="box">
        <h1 class="h1">千峰管理系统</h1>
        <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
            <el-input type="text" v-model="ruleForm.captcha" maxlength="11" class="captcha phone"></el-input>
            <span class="captcha-svg"
                style="color: #888; font-weight:bolder; 45px; text-decoration: underline; user-select: none; ">
                <div v-html="captcha" class="cap" @click="getCaptcha"></div>
            </span>
        </el-form-item>
        <el-form-item>
            <el-button class="bt1" type="primary" @click="submitForm('ruleForm')"
          
            >登入</el-button>
            
        </el-form-item>
        <div class="th">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shouji-iphone12-zhengmian"></use>
            </svg>
            <b @click="$emit('changeSmsType')">切换短信登入</b>
        </div>
    </div>
</template>
<script>
// import * as api from "../../api/login"

// let Login=async()=>{
//     let res=await api.loginApi(username,password)
//     console.log(res,'13465');
// }
// Login()
//表单验证的思路 子组件ruleForm变 父组件也跟着变
export default {
    mounted(){
        this.getCaptcha()
    },
    data() {
        return {
            isSmsLogin: true,//控制是否切换短信登入
            captcha:"",//验证码
            ruleForm: {
                username: '',
                password: '',
                captcha: ''
            },
        }
    },
    //通过watch监听LoginForm的变化
    watch: {
        ruleForm: {
            handler(newVal) {
                // console.log(newVal);
                this.$emit('syncLoginForm', newVal)
            },
            deep: true
        }
    },
    methods: {
        submitForm(formName) {
            // console.log(formName);
            this.$emit('submit')
        },
        //封装一个获取验证码的方法
        getCaptcha(){   
            api.getCaptcha()
            .then(res => {
                // console.log(res);
                this.captcha = res.data.img
            })
        }
    }
}
</script>
<style scoped lang="less">

.icon {
    width: 30px;
    height: 30px;
}

.box {
    width: 400px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 100px;
    left: 500px;
    overflow: hidden;
}

.el-input {
    /deep/ .el-input__inner {
        width: 200px;
    }
}

.el {

    /deep/ .el-input__inner {
        width: 100px;
    }

    /deep/ .el-input__wrapper {
        border-radius: 4px 0 0 4px;
        transition: none;
        box-shadow: none
    }

    .sp {
        width: 100px;
        height: 80px;
        background-color: #fff;
    }

}


.h1 {
    color: aliceblue;
    margin: 60px 0 40px 100px;
}

.th {
    color: aliceblue;
    margin-left: 150px;
    cursor: pointer;
    display: flex;
}

.bt1 {
    width: 200px;
}

.el-form-item {
    /deep/ .el-form-item__label {
        color: aliceblue;
    }
}

/deep/ .captcha {
    width: 100px;
    vertical-align: top;

    .el-input__inner {
        width: 100%;
        height: 45px;
        border-radius: 5px 0 0 5px;
        border: 0;
        font-size: 18px;
    }
}

.captcha-svg {
    background: #fff;
    display: inline-block;
    height: 45px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    border: 0;
    border-radius: 0px 5px 5px 0;
}
.cap{
        width: 100px;
        height: 30px;
    }

</style>